<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    img {
      cursor: pointer;
    }
  </style>
  <style>
    #flyjet {
      width: 40px;
      /* -> 400px */

      height: 24px;
      /* -> 240px */

      /* 可以让飞机变大再变小 */
      transition: all 3s cubic-bezier(0.5, 0, 0.5, 2);
    }
  </style>
</head>

<body>

  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">

  <script>
    flyjet.onclick = () => {
      flyjet.style.width = 400 + 'px'
      flyjet.style.height = 240 + 'px'
    }

    flyjet.addEventListener('transitionend', function() {
      alert('done !')
    });
  </script>

</body>

</html>